<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    window.addEventListener('resize', () => this.handlerResize(), false)
  },
  destroyed () {
    window.removeEventListener('resize', this.handlerResize)
  },
  methods: {
    handlerResize () {
      const collapse = this.$store.getters['menu/getCollapse']
      const clientWidth = document.body.clientWidth
      if (clientWidth < 1200 && !collapse) {
        this.$store.commit('menu/setCollapse', true)
      } else if (clientWidth >= 1200 && collapse) {
        this.$store.commit('menu/setCollapse', false)
      }
    }
  }
}
</script>